﻿@page "/docs/components/dropdown"

<Seo Canonical="/docs/components/dropdown" Title="Blazorise Dropdown component" Description="Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format." />

<DocsPageTitle>
    Dropdown
</DocsPageTitle>

<DocsPageParagraph>
    Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Code>Dropdown</Code> the main container
        <UnorderedList>
            <UnorderedListItem>
                <Code Tag>DropdownToggle</Code> toggle button
            </UnorderedListItem>
            <UnorderedListItem>
                <Code Tag>DropdownMenu</Code> the toggable menu, hidden by default
                <UnorderedList>
                    <UnorderedListItem>
                        <Code Tag>DropdownItem</Code> each single item of the dropdown menu
                    </UnorderedListItem>
                    <UnorderedListItem>
                        <Code Tag>DropdownDivider</Code> a horizontal line to separate dropdown items
                    </UnorderedListItem>
                    <UnorderedListItem>
                        <Code Tag>DropdownHeader</Code> a label for a section of items
                    </UnorderedListItem>
                </UnorderedList>
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSection>
    <DocsPageSectionHeader Title="Dropdown">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <DropdownExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DropdownExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Split Dropdown">
        Just add another Button to have a split dropdown.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <SplitDropdownExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SplitDropdownExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Show Menu">
        By default a dropdown toggle will show and hide a dropdown menu without the need to do it manually. In case you need to control the menu programmatically you have to use the Dropdown reference.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <ShowMenuExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ShowMenuExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Scrollable Menu">
        By default the menu will show all items. If you want to add the scrolling to the menu you just need to define the
        menu <Code>MaxMenuHeight</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <DropdownScrollMenuExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DropdownScrollMenuExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Nested submenus">
        By adding a few more Dropdowns you can add extra levels of submenu to your dropdown. You can apply this to the dropdown in a simple button or within the navbar.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <NestedDropdownExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="NestedDropdownExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Functions
</DocsPageSubtitle>

<Table>
    <TableHeader ThemeContrast="ThemeContrast.Light">
        <TableRow>
            <TableHeaderCell>Name</TableHeaderCell>
            <TableHeaderCell>Description</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowCell><Code>Show()</Code></TableRowCell>
            <TableRowCell>Show the dropdown menu.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell><Code>Hide()</Code></TableRowCell>
            <TableRowCell>Hides the dropdown menu.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell><Code>Toggle()</Code></TableRowCell>
            <TableRowCell>Switches the visibility of dropdown menu.</TableRowCell>
        </TableRow>
    </TableBody>
</Table>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes Title="Dropdown">
    <DocsAttributesItem Name="Visible" Type="bool" Default="false">
        Handles the visibility of dropdown menu.
    </DocsAttributesItem>
    <DocsAttributesItem Name="RightAligned" Type="bool" Default="false">
        Right aligned dropdown menu.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Disabled" Type="bool" Default="false">
        Disables the button or toggle button that are placed inside of dropdown.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Direction" Type="Direction" Default="Down">
        Direction of an dropdown menu.
    </DocsAttributesItem>
    <DocsAttributesItem Name="VisibleChanged" Type="EventCallback">
        Occurs after the dropdown menu visibility has changed.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="DropdownMenu">
    <DocsAttributesItem Name="MaxMenuHeight" Type="string">
        Sets the maximum height of the dropdown menu.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="DropdownItem">
    <DocsAttributesItem Name="Value" Type="object" Default="null">
        Holds the item value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Clicked" Type="EventCallback">
        Occurs when the item is clicked.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Active" Type="bool" Default="false">
        Marks the item with an state.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Disabled" Type="bool" Default="false">
        Marks the item with disabled state and doesn’t allow the click event.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="DropdownToggle">
    <DocsAttributesItem Name="Color" Type="Colors" Default="None">
        Component visual or contextual style variants.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Size" Type="Size" Default="None">
        Button size variations.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Split" Type="bool" Default="false">
        Handles the visibility of split button.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Outline" Type="bool" Default="false">
        Outlined button
    </DocsAttributesItem>
    <DocsAttributesItem Name="Disabled" Type="bool" Default="false">
        Makes toggle look inactive.
    </DocsAttributesItem>
</DocsAttributes>
